<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js鼠标点击兔子发射爆破特效 - 站长素材</title>

<style>  
    body, html {  
        width: 100%;  
        height: 100%;  
        margin: 0;  
        padding: 0;  
        overflow: hidden;  
        position: relative; /* Ensure the body can contain positioned pseudo-elements */  
        background:url(../example.jpeg) top left no-repeat;
    }  
  
    #torch {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
    }
</style>  
</head>

<body>


 <canvas id="torch"></canvas>
<script>
/**
 * Cross-browser wrapper for function "requestAnimationFrame"
 */
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

(function() {
    var cnv = document.querySelector("#torch");
    cnv.width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    cnv.height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    var ctx = cnv.getContext("2d");
    var mouse = {
        x: cnv.width / 2,
        y: cnv.height / 2
    };
    var flames = [];

    /**
     * Flame shapes constructor
     */
    var Flame = function() {
        function flame() {
            this.radius = 10;
            this.delete = false;
            this.position = {
                x: mouse.x + ((Math.random() > 0 ? 1 : -1) * Math.random() * 5),
                y: mouse.y
            };
        }

        flame.prototype.Draw = function(ctx) {
            if (this.radius > 0) {
                ctx.beginPath();
                ctx.fillStyle = "rgb(256," + (250 - this.radius * 12) + ",0)";
                ctx.arc(this.position.x, this.position.y - 3 - 30 + this.radius * 3, this.radius, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.fill();

                this.radius--;
            } else {
                this.delete = true;
            }
        };

        return new flame();
    };


    /**
     * Update mouse coordinates on moving
     */
    document.addEventListener('mousemove', function(event) {
        mouse.x = event.clientX;
        mouse.y = event.clientY;
    });

    /**
     * Redraw canvas
     */
    function Update() {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        // Draw background
        //ctx.beginPath();
        //ctx.fillStyle = "#000";
        //ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
        //ctx.closePath();
        //ctx.fill();

        // Draw highlight
        //var grad = ctx.createRadialGradient(mouse.x, mouse.y, 0, mouse.x, mouse.y, 200);
        //grad.addColorStop(0, "#310");
        //grad.addColorStop(1, "#000");
        //ctx.beginPath();
        //ctx.arc(mouse.x, mouse.y, 200, 0, Math.PI * 2, true);
        //ctx.fillStyle = grad;
        //ctx.closePath();
        //ctx.fill();

        // Draw flames
        for (var i = 0; i < flames.length; i++) {
            if (flames[i].delete) {
                flames.splice(i, 1);
                flames.push(new Flame());
            } else {
                flames[i].Draw(ctx);
            }
        }

        window.requestAnimFrame(Update);
    }

    // Start drawing
    for (var i = 0; i < 10; i++) {
        flames[i] = new Flame();
    }
    Update();
}());
</script>
 
</body>
</html>

